*{
    padding: 0;
    margin: 0;
}
body,html{
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}
/*   开始   */
@-webkit-keyframes start_log {
    from{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@-webkit-keyframes start_1 {
    from{
        transform: translate(720px,300px) translateZ(1000px);
    }
    to{
        transform: translateZ(0px);
    }
}
@-webkit-keyframes start_2 {
    from{
        transform: translateX(720px);
    }
    to{
        transform: translateX(0px);
    }
}
@-webkit-keyframes start_3 {
    from{
        transform: translateX(-720px);
    }
    to{
        transform: translateX(0px);
    }
}
@-webkit-keyframes start_4 {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@-webkit-keyframes start_5 {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/* hand */
@-webkit-keyframes hand {
    from{
        transform: scale(1.2);
    }50%{
         transform: scale(1);
     }to{
          transform: scale(1.2);
      }
}
.start{
    width: 100%;
    height: 100%;
    background-image: url("../img/start_bg.png");
    background-size: 100% 100%;
    position: relative;
    /*display: none;*/
}
.start_log{
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
.start_1{
    width: 95.416%;
    position: absolute;
    top: 8.608%;
    left: 4.583%;
    animation: start_1 1.5s linear;
}
.start_2{
    width: 51.805%;
    position: absolute;
    top: 29.304%;
    left: 38.611%;
    animation: start_2 1s linear;
}
.start_3{
    width: 60.833%;
    position: absolute;
    top: 37.130%;
    left: 25.972%;
    animation: start_3 1.5s linear;
}
.start_4{
    width: 74.861%;
    position: absolute;
    top: 69.173%;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    animation: start_4 1s linear forwards 1.5s;
}
.start_5{
    width: 17.638%;
    position: absolute;
    bottom: 19.739%;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    animation: start_5 1s linear forwards 1.8s;
}
/*   说明   */
.shuoming{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.sm1{
    width: 81.944%;
    position: absolute;
    top: 8.173%;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.sm2{
    width: 9.166%;
    position: absolute;
    top: 19.782%;
    right: 6.944%;
}
/*   录制现场   */
.start_l{
    width: 100%;
    height: 100%;
    background-image: url("../img/wanfa_bg.png");
    background-size: 100% 100%;
    display: none;
}
.start_l1,.start_l2,.start_l3{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.start_l1{
    width: 66.805%;
    top: 42.739%;
}
.start_l2{
    width: 79.305%;
    top: 52%;
}
.start_l3{
    width: 82.777%;
    bottom: 11.565%;
}
/*   画布   */
#canvas{
    display: none;
}
/*   赛车按钮   */
.s_btn{
    display: none;
}
.s_btn1{
    width: 20.555%;
    position: absolute;
    bottom: 4.1304%;
    left: 22.638%;
}
.s_btn2{
    width: 20.555%;
    position: absolute;
    bottom: 4.1304%;
    right: 22.083%;
}
.s_btn3,.s_btn4{
    width: 16.944%;
    position: absolute;
    right: 1.111%;
}
.s_btn3{
    bottom: 4.956%;
}
.s_btn4{
    bottom: 9.956%;
    display: none;
}
.s_btn5{
    width: 19.722%;
    position: absolute;
    top: 9.565%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.s_btn6{
    width: 33.888%;
    position: absolute;
    top: 42.347%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.s_btn7{
    width: 35.972%;
    position: absolute;
    top: 1%;
    left: 2.222%;
}
.s_btn8{
    color: white;
    position: absolute;
    top: 6%;
    left: 19.916%;
    font-size: 20px;
}
/*   付爽   */
#end_success{
    width: 100%;
    height: 100%;
    background-image: url("../img/guoguan_bg.png");
    background-size: 100% 100%;
    position: relative;
    display: none;
}
#end_success>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#end_success>img:nth-of-type(2){
    width: 75.166%;
    position: absolute;
    top: 27.086%;
    left: 10.388%;
    font-size: 16px;
}
#end_success>p:nth-of-type(1){
    width: 60.166%;
    position: absolute;
    top: 39.086%;
    left: 21.388%;
    color: white;
    font-size: 22px;
}
#end_success>p:nth-of-type(2){
    width: 51.166%;
    position: absolute;
    top: 44.086%;
    left: 24.388%;
    font-size: 22px;
    color: white;
}
#end_success>img:nth-of-type(3){
    width: 89.166%;
    position: absolute;
    top: 48.086%;
    left: 5.388%;
}
#end_success>img:nth-of-type(4){
    width: 96.166%;
    position: absolute;
    top: 68.086%;
    left: 1.388%;
}
#end_success>img:nth-of-type(5){
    width: 96.166%;
    position: absolute;
    top: 77.086%;
    left: 1.388%;
}
.yaoqingup{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.yaoqingup img{
    width: 88%;
    height: 60%;
    position: absolute;
    top: 4%;
    left:8%;
}
.miss,.percent,.percent1{
    color: #FFC83D;
}
.bangdan{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.bangdan>img:nth-child(1){
    width: 85%;
    height: 85%;
    position: absolute;
    top: 4%;
    left:8%;
}
.close{
    width: 13%;
    height: 8%;
    position: absolute;
    top: 17%;
    left:84%;
}
#end_fail{
    width: 100%;
    height: 100%;
    background-image: url("../img/fail_bg.png");
    background-size: 100% 100%;
    position: relative;
    display: none;
}
#end_fail>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#end_fail>img:nth-of-type(2){
    width: 83.166%;
    position: absolute;
    top: 29.086%;
    left: 10.388%;
    font-size: 16px;
}
#end_fail>p:nth-of-type(1){
    width: 60.166%;
    position: absolute;
    top: 39.086%;
    left: 21.388%;
    color: white;
    font-size: 22px;
}
#end_fail>p:nth-of-type(2){
    width: 51.166%;
    position: absolute;
    top: 44.086%;
    left: 24.388%;
    font-size: 22px;
    color: white;
}
#end_fail>img:nth-of-type(3){
    width: 89.166%;
    position: absolute;
    top: 48.086%;
    left: 5.388%;
}
#end_fail>img:nth-of-type(4){
    width: 96.166%;
    position: absolute;
    top: 68.086%;
    left: 1.388%;
}
#end_fail>img:nth-of-type(5){
    width: 96.166%;
    position: absolute;
    top: 77.086%;
    left: 1.388%;
}

#choose{
    width: 100%;
    height: 100%;
    background-image: url("../img/start_bg.png");
    background-size: 103% 115%;
    position: relative;
    display: none;
}
#choose>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#choose>img:nth-of-type(2){
    width: 81.166%;
    position: absolute;
    top: 12.086%;
    left: 10.388%;
    font-size: 16px;
}
#choose>p:nth-of-type(1){
    width: 60.166%;
    position: absolute;
    top: 39.086%;
    left: 27.388%;
    color: white;
    font-size: 22px;
}
#choose>p:nth-of-type(2){
    width: 51.166%;
    position: absolute;
    top: 44.086%;
    left: 24.388%;
    font-size: 22px;
    color: white;
}
#choose>img:nth-of-type(3){
    width: 77.166%;
    position: absolute;
    top: 24.086%;
    left: 11.388%;
}
#choose>img:nth-of-type(4){
    width: 53.166%;
    height: 5%;
    position: absolute;
    top: 50.086%;
    left: 23.388%;
}
#choose>img:nth-of-type(5){
    width: 96.166%;
    position: absolute;
    top: 57.086%;
    left: 1.388%;
}
#choose>img:nth-of-type(6){
    width: 96.166%;
    position: absolute;
    top: 66.086%;
    left: 1.388%;
}

#noone{
    width: 100%;
    height: 100%;
    background-image: url("../img/start_bg.png");
    background-size: 103% 115%;
    position: relative;
    display: none;
}
#noone>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#noone>img:nth-of-type(2){
    width: 81.166%;
    height: 5%;
    position: absolute;
    top: 16.086%;
    left: 10.388%;
    font-size: 16px;
}
#noone>p{
    width: 73.166%;
    position: absolute;
    top: 23.086%;
    left: 17.388%;
    color: white;
    font-size: 17px;
}
.chooseNum{
    color: #FFC83D;
}
#noone>img:nth-of-type(3){
    width: 88.166%;
    position: absolute;
    top: 27.086%;
    left: 6.388%;
}
#noone>img:nth-of-type(4){
    width: 96.166%;
    position: absolute;
    top: 57.086%;
    left: 1.388%;
}
#noone>img:nth-of-type(5){
    width: 96.166%;
    position: absolute;
    top: 66.086%;
    left: 1.388%;
}
#taotai{
    width: 100%;
    height: 100%;
    background-image: url("../img/start_bg.png");
    background-size: 103% 115%;
    position: relative;
    display: none;
}
#taotai>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#taotai>img:nth-of-type(2){
    width: 93.166%;
    height: 44%;
    position: absolute;
    top: 18.086%;
    left: 3.388%;
}
#taotai>img:nth-of-type(3){
    width: 96.166%;
    position: absolute;
    top: 64.086%;
    left: 1.388%;
}
#tochoujiang{
    width: 100%;
    height: 100%;
    background-image: url("../img/guoguan_bg.png");
    background-size: 103% 115%;
    position: relative;
    display: none;
}
#tochoujiang>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#tochoujiang>img:nth-of-type(2){
    width: 87.166%;
    height: 23%;
    position: absolute;
    top: 36.086%;
    left: 3.388%;
}
#tochoujiang>img:nth-of-type(3){
    width: 97.166%;
    position: absolute;
    top: 61.086%;
    left: 0.388%;
}

#zhuanpan{
    width: 100%;
    height: 100%;
    background-image: url("../img/start_bg.png");
    background-size: 103% 115%;
    position: relative;
    display: none;
}
#zhuanpan>img:nth-of-type(1){
    width: 34.166%;
    position: absolute;
    top: 2.086%;
    left: 6.388%;
    animation: start_log 2s linear 1s;
}
#zp_pan{
    width: 80%;
    position: absolute;
    left: 10%;
    top: 13.9%;
}
#zp_readyGo{
    width: 21.25%;
    position: absolute;
    left: 0;
    right: 0;
    top: 30.5%;
    margin: 0 auto;
}
#zp_car_box{
    width: 80%;
    position: absolute;
    transform: rotate(45deg);
    top: 13.9%;
    left: 10%;
}
#zp_car{
    width: 18.32%;
    position: absolute;
    transform: rotate(-45deg);
    top: 84%;
    left: 32%;
}
#zp_hand{
    width: 7.634%;
    position: absolute;
    top: 37%;
    left: 52%;
    animation: hand 1.8s infinite;
}

#zhongjiang{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#zhongjiang>img:nth-of-type(1){
    width: 84.166%;
    height: 70%;
    position: absolute;
    top: 12.086%;
    left: 10.388%;
}
#zhongjiang>img:nth-of-type(2){
    width: 67.166%;
    height: 22%;
    position: absolute;
    top: 42.086%;
    left: 16.388%;
}
#zhongjiang>img:nth-of-type(3){
    width: 97.166%;
    position: absolute;
    top: 68.086%;
    left: 0.388%;
}
#yihan{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#yihan>img:nth-of-type(1){
    width: 53.166%;
    height: 48%;
    position: absolute;
    top: 22.086%;
    left: 24.388%;
}
#yihan>img:nth-of-type(2){
    width: 98.166%;
    position: absolute;
    top: 66.086%;
    left: 0.388%;
}
#info{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#info>img:nth-of-type(1){
    width: 79.166%;
    height: 56%;
    position: absolute;
    top: 10.086%;
    left: 11.388%;
}
.username{
    width: 98.166%;
    position: absolute;
    top: 31.086%;
    left: 20.388%;
    color: white;
    font-size: 23px;
}
.username input{
    width: 47%;
    padding-top: 3%;
}
.tel{
    width: 98.166%;
    position: absolute;
    top: 37.086%;
    left: 20%;
    color: white;
    font-size: 23px;
}
.tel input{
    width: 47%;
    padding-top: 3%;
}
.address{
    width: 98.166%;
    position: absolute;
    top: 43.086%;
    left: 20.388%;
    color: white;
    font-size: 23px;
}
#province{
    border: 1px solid white;
    background-color: white;
    width: 23%;
    padding-top: 2%;
    padding-bottom: 1.5%;
    padding-left: 2%;
}
#city{
    border: 1px solid white;
    background-color: white;
    width: 23%;
    padding-top: 2%;
    padding-bottom: 1.5%;
    padding-left: 4%;
}
#info>img:nth-of-type(2){
    width: 5.166%;
    height: 3%;
    position: absolute;
    top: 44.086%;
    left: 49.388%;
}
.qu{
    width: 98.166%;
    position: absolute;
    top: 50.086%;
    left: 33.388%;
}
.qu input{
    width: 47%;
    padding-top: 3%;
}
#info>img:nth-of-type(3){
    width: 5.166%;
    height: 3%;
    position: absolute;
    top: 44.086%;
    left: 73.388%;
}
#info>img:nth-of-type(4){
    width: 79.166%;
    height: 12%;
    position: absolute;
    top: 68.086%;
    left: 11.388%;
}
#submit{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#submit>img:nth-of-type(1){
    width: 79.166%;
    height: 56%;
    position: absolute;
    top: 15.086%;
    left: 11.388%;
}